<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { useTheme } from './composables/useTheme'
import { useNotification } from './composables/useNotification'
import { useCopyToast } from './composables/useCopyToast'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
import MainConverter from './components/MainConverter.vue'
import NotificationContainer from './components/NotificationContainer.vue'
import CopyToast from './components/CopyToast.vue'

// 初始化主题系统
const { isInitialized } = useTheme()
const { showSuccess, showError, showWarning, showInfo, clearNotifications, cleanup } =
  useNotification()

// 复制提示系统
const { toastComponent: copyToastComponent } = useCopyToast()

onMounted(() => {
  // 设置页面标题
  document.title = 'MCP JSON2TOML - JSON到TOML转换工具'

  // 设置页面描述
  const metaDescription = document.querySelector('meta[name="description"]')
  if (metaDescription) {
    metaDescription.setAttribute('content', '将MCP配置从JSON格式转换为TOML格式的在线工具')
  }

  // 添加主题色meta标签
  let themeColorMeta = document.querySelector('meta[name="theme-color"]')
  if (!themeColorMeta) {
    themeColorMeta = document.createElement('meta')
    themeColorMeta.setAttribute('name', 'theme-color')
    document.head.appendChild(themeColorMeta)
  }

  // 添加无障碍访问meta标签
  let colorSchemeMeta = document.querySelector('meta[name="color-scheme"]')
  if (!colorSchemeMeta) {
    colorSchemeMeta = document.createElement('meta')
    colorSchemeMeta.setAttribute('name', 'color-scheme')
    document.head.appendChild(colorSchemeMeta)
  }

  // 监听测试通知消息
  window.addEventListener('message', (event) => {
    // 简单的安全检查
    if (event.data) {
      if (event.data.type === 'test-notification') {
        const { notificationType, title, message, duration } = event.data

        switch (notificationType) {
          case 'success':
            showSuccess(title, message, duration)
            break
          case 'error':
            showError(title, message, duration)
            break
          case 'warning':
            showWarning(title, message, duration)
            break
          case 'info':
          default:
            showInfo(title, message, duration)
            break
        }
      } else if (event.data.type === 'clear-all-notifications') {
        clearNotifications()
      }
    }
  })
})

// 应用卸载时清理通知系统
onUnmounted(() => {
  cleanup()
})
</script>

<template>
  <div
    id="app"
    class="min-h-screen flex flex-col"
    :style="{ backgroundColor: 'var(--bg-primary)' }"
  >
    <!-- 加载状态 -->
    <div
      v-if="!isInitialized"
      class="fixed inset-0 flex items-center justify-center"
      style="background-color: var(--bg-primary)"
    >
      <div class="flex flex-col items-center space-y-4">
        <div
          class="loading-spinner w-8 h-8 border-4 border-primary-200 border-t-primary-600 rounded-full"
        ></div>
        <p class="text-sm" style="color: var(--text-tertiary)">正在初始化...</p>
      </div>
    </div>

    <!-- 主要内容 -->
    <template v-else>
      <!-- 复制提示 -->
      <CopyToast
        v-if="copyToastComponent"
        :message="copyToastComponent.message"
        :type="copyToastComponent.type"
        :duration="copyToastComponent.duration"
        :key="copyToastComponent.id"
      />

      <!-- 通知容器 -->
      <NotificationContainer />

      <!-- 头部 -->
      <Header />

      <!-- 主要内容 -->
      <MainConverter />

      <!-- 底部 -->
      <Footer />
    </template>
  </div>
</template>

<style scoped>
/* 全局样式已在 main.css 中定义 */

/* 加载动画 */
.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 确保过渡效果平滑 */
#app {
  transition: background-color var(--transition-normal);
}
</style>
